<template>
        <div class="main">
            <ul class="listTitle">
                <li v-for='item in this.$store.state.leaveStorage.outStockRecordList'>{{item.label}}</li>
            </ul>
            <ul class="dataList" v-for='(item,index) in dataList'>
                <li>{{index + 1}}</li>
                <li>{{item.drugName}}</li>
                <li>{{item.maxPackingNum}}</li>
            </ul>
            <p class="nullContent" v-show='nullContent'>暂无数据</p>
        </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {
                dataList: [],
                nullContent: false,
                leaveWarehouseId: this.$store.state.leaveStorage.leaveWarehouseId
            }
        },
        filters: {

        },
        created: function() {
            console.log(this.leaveWarehouseId)
            this.getDetailList();
        },
        methods: {
            getDetailList: function() {
                this.$store.commit('showLoading');
                this.getOutStockDetailList({
                    leaveWarehouseId: this.leaveWarehouseId
                }).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code == 200) {
                        this.dataList = data.data;
                        if (data.data.length == 0) {
                            this.nullContent = true;
                        }
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg));
            },
            ...mapActions(['getOutStockDetailList'])
        }
    }

</script>
<style scoped>
    .main {
        width: 100%;
        background-color: #fff;
        margin: 10px 0 0;
    }
    
    .listTitle {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #999999;
        font-size: 14px;
        text-align: center;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        box-sizing: border-box;
    }
    
    .dataList {
        width: 100%;
        height: 56px;
        line-height: 56px;
        color: #333333;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
    }
    
    .dataList {
        border-bottom: 1px solid #dddddd;
    }
    
    .dataList li,
    .listTitle li {
        border-right: 1px solid #dddddd;
        box-sizing: border-box;
    }
    
    li {
        float: left;
    }
    
    ul {
        margin: 0;
        padding: 0;
    }
    
    .listTitle li:nth-child(1),
    .dataList li:nth-child(1) {
        width: 8%;
    }
    
    .listTitle li:nth-child(2),
    .dataList li:nth-child(2) {
        width: 46%;
    }
    
    .listTitle li:nth-child(3),
    .dataList li:nth-child(3) {
        width: 46%;
        border-right:none;
    }
</style>
